Setting Style for Select > Option

[Jason Carlton]

Is there a way to change the font-family and font-size for each
individual option in a select menu? Something along the lines of:

<select size="1">
<option style="font-family: Arial; font-size: 8px">One</option>
<option style="font-family: Tahoma; font-size: 10px">Two</option>
<option style="font-family: Verdana; font-size: 12px">Three</option>
</select>

I see that I can change the color using style="color: whatever", but
none of the other attributes change this way.

TIA,

Jason

[Jukka K. Korpela]

Scripsit Jason Carlton:

Is there a way to change the font-family and font-size for each
individual option in a select menu?

Yes, of course. And, of course, usual CSS Caveats apply.

<select size="1">
<option style="font-family: Arial; font-size: 8px">One</option>
<option style="font-family: Tahoma; font-size: 10px">Two</option>
<option style="font-family: Verdana; font-size: 12px">Three</option>
</select>

Of course, that's absurd, but so (though maybe less obviously) is almost
any idea of setting font family or size different in different options.

I see that I can change the color using style="color: whatever", but
none of the other attributes change this way.

Oh, it's just item #2 in the usual CSS Caveats:

"Not all browsers support CSS.
Not all browser versions support CSS to the same extent.
Not all users will have enabled CSS in CSS enabled browsers.
Some users of NN may have disabled Javascript, thus disabling CSS.
Some users may have enabled their own stylesheets, disabling yours.
CSS2 and CSS-P are moving targets. Use with care.
Font specification is problematic.
Unusual caveats may apply. ;-) "

http://www.dev-archive.net/articles/...S-caveats.html
(mostly ignore the disclaimer; the content, though old, is much more
fresh and meaningful than most of the CSS stuff around)

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[Petr Vileta]

Jason Carlton wrote:

Is there a way to change the font-family and font-size for each
individual option in a select menu? Something along the lines of:

<select size="1">
<option style="font-family: Arial; font-size: 8px">One</option>
<option style="font-family: Tahoma; font-size: 10px">Two</option>
<option style="font-family: Verdana; font-size: 12px">Three</option>
</select>

I see that I can change the color using style="color: whatever", but
none of the other attributes change this way.

You can change background color too but this is circa all what you can do with
<optiontag :-)
I had similar problem as you few month ago and I resolve it by using
scrollable <divand series of checkboxes. Of course, this is workaround but
work for most used browsers.
--
Petr Vileta, Czech republic
(My server rejects all messages from Yahoo and Hotmail. Send me your
mail from another non-spammer site please.)

Please reply to <petr AT practisoft DOT cz>

[Jukka K. Korpela]

Scripsit Jukka K. Korpela:

http://www.dev-archive.net/articles/...S-caveats.html
(mostly ignore the disclaimer; the content, though old, is much more
fresh and meaningful than most of the CSS stuff around)

I decided to write a modernized and somewhat expanded version of the CSS
Caveats:
http://www.cs.tut.fi/~jkorpela/css-caveats.html

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/